<template>
  <div class="condition">
    <el-form :inline="true" :model="searchForm">
      <el-row :gutter="20">
        <el-col :span="10" style="float: right">
          <el-button
            type="primary"
            :disabled="!permissions?.includes(16)"
            @click="addRole"
            >{{ t(`module.table.AddRole`) }}</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="datatable">
    <el-table
      :data="result.list"
      border
      style="width: 100%; box-sizing: border-box"
    >
      <el-table-column
        prop="name"
        :label="t(`module.table.Name`)"
        :align="'center'"
      />
      <el-table-column :label="t(`module.table.Handle`)" :align="'center'">
        <template #default="scope">
          <el-button
            :disabled="!permissions.includes(17)"
            @click="edit(scope.row)"
            >{{ t(`module.table.Edit`) }}</el-button >
        </template>
      </el-table-column>
    </el-table>
    <el-row :gutter="20" class="mt_20">
      <el-col :span="10" :offset="10">
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="result.total"
          class="mt-4"
          @current-change="changePage"
          :current-page="searchForm.page"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>

  <el-dialog
    center
    :close-on-click-modal="false"
    v-model="dialogFormVisible"
    :title="
      form.action == 'edit'
        ? t(`module.table.EditRoleForm`)
        : t(`module.table.AddRole`)
    "
  >
    <el-form
      :model="form"
      label-width="120px"
      label-position="left"
      style="max-width: 70%"
    >
      <el-form-item
        :label="t(`module.table.Name`)"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item
        :label="t(`module.table.Permissions`)"
        :label-width="formLabelWidth"
      >
        <el-tree-select
          v-model="form.permission_list"
          :data="permissionList"
          multiple
          :render-after-expand="false"
          show-checkbox
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">{{ t(`module.table.Cancel`) }}</el-button>
        <el-button type="primary" @click="submit">{{
          t(`module.table.Confirm`)
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import API from 'api'

export default {
  name: 'Role-List',

  setup() {
    const { t } = useI18n()

    let state = reactive({
      result: {
        list: [],
        total: 0,
      },
      searchForm: {
        page: 1,
        keyword: '',
      },
      form: {
        id: 0,
        name: '',
        permission_list: [],
      },
      currentStatus: true,
      dialogFormVisible: false,
      permissionList: [],
      permissions: [],
    })
    onMounted(() => {
      getPermissionList()
      getRoleList()
      state.permissions = window.menu
    })
    const searchFunc = () => {
      // 搜索重置为第一页
      state.searchForm.page = 1
      getContactList()
    }
    const getPermissionList = () => {
      API.permissionList().then((res) => {
        state.result = res.data
      })
    }
    const getRoleList = () => {
      API.roleList({
        page: state.searchForm.page,
        keyword: state.searchForm.keyword,
      }).then((res) => {
        state.result = res.data
      })
    }
    const initList = () => {
      initPermissionList()
    }
    const addRole = () => {
      initList()
      initForm()
      state.dialogFormVisible = true
    }
    const edit = (param) => {
      state.form = param
      initList()
      state.dialogFormVisible = true
    }
    const submit = () => {
      state.form.action = 'edit'
      if (state.form.id == 0) {
        state.form.action = 'add'
        state.form.id = null
      }

      API.handleRole(state.form).then((res) => {
        if (res.code != 0) {
          ElMessage.error(res.data)
          return
        }
        initForm()
        state.dialogFormVisible = false
        ElMessage({
          message: 'success',
          type: 'success',
        })
      })
    }

    const cancel = () => {
      initForm()
      state.dialogFormVisible = false
    }

    const initForm = () => {
      state.form = {
        id: 0,
        name: '',
        permission_list: [],
      }
    }
    // 获取直辖单位列表
    const initPermissionList = () => {
      API.permissionList().then((res) => {
        state.permissionList = res.data
      })
    }
    const changePage = (page) => {
      state.searchForm.page = page
      getRoleList()
    }
    return {
      t,
      searchFunc,
      changePage,
      addRole,
      edit,
      ...toRefs(state),
      submit,
      cancel,
      Search,
    }
  },
}
</script>

<style lang="scss" scoped>
.title {
  display: block;
  padding: 2rem 1rem;
  font-size: 2rem;
  font-weight: bolder;
  text-align: left;
}
.condition {
  margin-top: 4vh;
}
.search {
  display: flex;
  width: 30rem;
  padding: 1rem;
}
.datatable {
  box-sizing: border-box;
  width: 60vw;
  padding: 0.625rem;
}
.ml-1 {
  margin-left: 1rem;
}
</style>
